<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <link href="css/css_15_购物车.css" rel="stylesheet">

</head>
<body>


<div class="main">
<!--1. header ： logo+ 搜索-->
<div class="header">
    <div class="logo-left">
        <a href=""></a>
    </div>
    <div class="search-right">

        <form action="" class="search-form">
            <input type="text" class="keyword" placeholder="搜索商品">
            <a href="" class="search-btn">搜索</a>
        </form>

    </div>
</div>


<!--2. 全部商品标题-->
<div class="cart-filter-bar">
    <div class="switch-cart">
        <span class="cart-title">全部商品</span>
        <span class="cart-pro-number">50</span>
    </div>

    <div class="cart-store">
        <label class="cart-store-label">配送至:</label>
        <span class="cart-store-area">江苏苏州市园区</span>

        <div class="cart-area-model">
            <ul>
                <li>江苏苏州市园区</li>
                <li>江苏省苏州市虎丘区</li>
                <li>江苏省苏州市张家港市</li>
                <li>江苏省常州市武进区</li>
                <li>江苏省苏州市吴中区</li>
            </ul>
        </div>
    </div>

</div>

<!--3. 操作的小标题-->
<div class="cart-head">
    <div class="head-checkbox">
        <input type="checkbox">
        <span>全选</span>
    </div>

    <div class="head-goods">商品</div>
    <div class="head-props"></div>
    <div class="head-right">单价</div>
    <div class="head-right">数量</div>
    <div class="head-right">小计</div>
    <div class="head-right">操作</div>
</div>


<!--4. 商品列表-->
<div class="pro-list">
    <ul>
        <li>
            <!--店铺名称-->
            <div class="shop-name">
                <input type="checkbox">
                <span>心相印旗舰店</span>
            </div>

            <!--商品详情： 左边（图片名称） + 右边（价格操作）-->
            <div class="goods-detail">
                <!-- 左边（图片名称）-->
                <div class="goods-left">
                    <input type="checkbox">
                    <a href="" class="goods-img">
                        <img src="images/pro2.jpg">
                    </a>
                    <a href="" class="goods-name">
                        【当天发货】小米11青春版 5G手机 冰峰黑提 全网通8G+128G【33W充电套装+晒单返20】
                    </a>
                </div>


                <!-- 右边（价格操作）-->
                <div class="goods-right">
                    <div class="cell unit-price">
                        <span>￥</span>
                        <span>1966</span>
                    </div>
                    <div class="cell cart-quality">
                        <button>-</button>
                        <input type="text" value="1">
                        <button>+</button>
                    </div>

                    <div class="cell cart-xiaoji">
                        <span>￥</span>
                        <span>1966</span>
                    </div>
                    <div class="cell cart-delete">
                        <a href="">删除</a>
                    </div>

                </div>
            </div>

        </li>
        <li>
            <!--店铺名称-->
            <div class="shop-name">
                <input type="checkbox">
                <span>心相印旗舰店</span>
            </div>

            <!--商品详情： 左边（图片名称） + 右边（价格操作）-->
            <div class="goods-detail">
                <!-- 左边（图片名称）-->
                <div class="goods-left">
                    <input type="checkbox">
                    <a href="" class="goods-img">
                        <img src="images/pro3.jpg">
                    </a>
                    <a href="" class="goods-name">
                        中兴Axon 30Pro 6400万双主摄 120HZ屏 8GB+128GB 曜石黑 骁龙888 55W快充 A30Pro拍照游戏5G手机
                    </a>
                </div>


                <!-- 右边（价格操作）-->
                <div class="goods-right">
                    <div class="cell unit-price">
                        <span>￥</span>
                        <span>2498</span>
                    </div>
                    <div class="cell cart-quality">
                        <button>-</button>
                        <input type="text" value="1">
                        <button>+</button>
                    </div>

                    <div class="cell cart-xiaoji">
                        <span>￥</span>
                        <span>2498</span>
                    </div>
                    <div class="cell cart-delete">
                        <a href="">删除</a>
                    </div>

                </div>
            </div>

        </li>
        <li>
            <!--店铺名称-->
            <div class="shop-name">
                <input type="checkbox">
                <span>心相印旗舰店</span>
            </div>

            <!--商品详情： 左边（图片名称） + 右边（价格操作）-->
            <div class="goods-detail">
                <!-- 左边（图片名称）-->
                <div class="goods-left">
                    <input type="checkbox">
                    <a href="" class="goods-img">
                        <img src="images/pro4.jpg">
                    </a>
                    <a href="" class="goods-name">
                        小米11 Pro 5G 骁龙888 2K AMOLED四曲面柔性屏 67W无线闪充 3D玻璃工艺 12GB+256GB 黑色 游戏手机
                    </a>
                </div>


                <!-- 右边（价格操作）-->
                <div class="goods-right">
                    <div class="cell unit-price">
                        <span>￥</span>
                        <span>5168</span>
                    </div>
                    <div class="cell cart-quality">
                        <button>-</button>
                        <input type="text" value="1">
                        <button>+</button>
                    </div>

                    <div class="cell cart-xiaoji">
                        <span>￥</span>
                        <span>5168</span>
                    </div>
                    <div class="cell cart-delete">
                        <a href="">删除</a>
                    </div>

                </div>
            </div>

        </li>
    </ul>
</div>


<!--5. 底部结算条-->
<div class="cart-floatbar">
    <div class="jiesuan-left">
        <input type="checkbox">
        <span>全选</span>
        <a href="">删除选中的商品</a>
    </div>


    <div class="jiesuan-right">
        <div class="selected-count">
            <span class="selected-count-label">已选中</span>
            <span class="number">1</span>
            <span class="selected-count-label">件商品</span>
        </div>

        <div class="zongjia">
            <span class="selected-count-label">总价:</span>
            <span class="zongjia-price">￥</span>
            <span class="zongjia-price">999</span>

        </div>
        <a href="" class="jiesuan-btn">去结算</a>

    </div>
</div>
</div>


</body>
</html>